import React, { Component } from 'react';
import { Menu, Icon, Layout, Popover } from 'antd';
import screenfull from 'screenfull';
import { gitOauthToken, gitOauthInfo } from '../axios';
import { queryString } from '../utils';
import avater from '../style/imgs/b1.png';
import SiderCustom from './SiderCustom';
import storage from '../utils/storage';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
const { Header } = Layout;
const SubMenu = Menu.SubMenu;

class HeaderCustom extends Component {
  state = {
    user: '',
    visible: false,
    currentUser: {}
  };
  componentDidMount() {
    const QueryString = queryString();
    const _user = JSON.parse(localStorage.getItem('user')) || '测试';
    if (!_user && QueryString.hasOwnProperty('code')) {
      gitOauthToken(QueryString.code).then(res => {
        gitOauthInfo(res.access_token).then(info => {
          this.setState({
            user: info
          });
          localStorage.setItem('user', JSON.stringify(info));
        });
      });
    } else {
      this.setState({
        user: _user
      });
    }
    const currentUser = storage.get('currentUser');
    this.setState({
      currentUser
    });
  };
  screenFull = () => {
    if (screenfull.enabled) {
      screenfull.request();
    }

  };
  menuClick = e => {
    // console.log(e);
    e.key === 'logout' && this.logout();
  };
  logout = () => {
    localStorage.removeItem('user');
    this.props.history.push('/login');
  };
  popoverHide = () => {
    this.setState({
      visible: false,
    });
  };
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  };
  render() {
    const { responsive, path } = this.props;
    const { currentUser } = this.state;
    return (
      <Header className="custom-theme header" >
        {
          responsive.isMobile ? (
            <Popover content={<SiderCustom path={path} popoverHide={this.popoverHide} />} trigger="click" placement="bottomLeft" visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
              <Icon type="bars" className="header__trigger custom-trigger" />
            </Popover>
          ) : (
              <Icon
                className="header__trigger custom-trigger"
                type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.props.toggle}
              />
            )
        }
        <Menu
          mode="horizontal"
          theme="light"
          style={{ lineHeight: '64px', float: 'right', borderBottom: 'none' }}
          onClick={this.menuClick}
        >
          <SubMenu style={{ borderBottom: 'none' }} title={<span className="avatar"><span>{currentUser.nickname}</span></span>}>
            <Menu.Item key="logout"><span onClick={this.logout}>退出登录</span></Menu.Item>
          </SubMenu>
        </Menu>
      </Header>
    )
  }
}

const mapStateToProps = state => {
  const responsive = state.responsive;
  return { responsive };
};

export default withRouter(connect(mapStateToProps)(HeaderCustom));
